/* color palette from <https://github.com/vuejs/theme> */
:root {
    /* 主题色 */
    --yf-color-primary: #f7772e;
    --yf-color-success: #67c23a;
    --yf-color-warning: #e6a23c;
    --yf-color-error: #f56c6c;
    --yf-color-info: #909399;
    --yf-bg-color: #ffffff;
    --yf-bg-color-page: #f2f3f5;

    --yf-text-color-primary: #303133;
    --yf-text-color-regular: #606266;
    --yf-text-color-secondary: #909399;
    --yf-text-color-placeholder: #a8abb2;
    --yf-text-color-disabled: #c0c4cc;

    --yf--border-color: #dcdfe6;
    --yf--border-color-light: #e4e7ed;
    --yf--border-color-lighter: #ebeef5;
    --yf--border-color-extra-light: #f2f6fc;
    --yf--border-color-dark: #d4d7de;
    --yf--border-color-darker: #cdd0d6;

    --yf--fill-color: #f0f2f5;
    --yf--fill-color-light: #f5f7fa;
    --yf--fill-color-lighter: #fafafa;
    --yf--fill-color-extra-light: #fafcff;
    --yf--fill-color-dark: #ebedf0;
    --yf--fill-color-darker: #e6e8eb;
    --yf--fill-color-blank: #ffffff;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    font-weight: normal;
}

body {
    min-height: 100vh;
    color: var(--yf-text-color-regular);
    background: var(--yf--fill-color);
    transition:
        color 0.5s,
        background-color 0.5s;
    line-height: 1.6;
    // font-family:
    //     Inter,
    //     -apple-system,
    //     BlinkMacSystemFont,
    //     'Segoe UI',
    //     Roboto,
    //     Oxygen,
    //     Ubuntu,
    //     Cantarell,
    //     'Fira Sans',
    //     'Droid Sans',
    //     'Helvetica Neue',
    //     sans-serif;
    font-family:
        PingFangSC-Regular,
        PingFang SC;
    font-size: 15px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 外边距、内边距全局样式 */
@for $i from 0 through 40 {
    .mt#{$i} {
        margin-top: #{$i}px !important;
    }
    .mr#{$i} {
        margin-right: #{$i}px !important;
    }
    .mb#{$i} {
        margin-bottom: #{$i}px !important;
    }
    .ml#{$i} {
        margin-left: #{$i}px !important;
    }
    .mx#{$i} {
        margin-left: #{$i}px !important;
        margin-right: #{$i}px !important;
    }
    .my#{$i} {
        margin-top: #{$i}px !important;
        margin-bottom: #{$i}px !important;
    }
    .pt#{$i} {
        padding-top: #{$i}px !important;
    }
    .pr#{$i} {
        padding-right: #{$i}px !important;
    }
    .pb#{$i} {
        padding-bottom: #{$i}px !important;
    }
    .pl#{$i} {
        padding-left: #{$i}px !important;
    }
    .px#{$i} {
        padding-left: #{$i}px !important;
        padding-right: #{$i}px !important;
    }
    .py#{$i} {
        padding-top: #{$i}px !important;
        padding-bottom: #{$i}px !important;
    }
}
